<template>
  <div>
    <el-card shadow="never" :style="{height: documentHeight + 'px', overflow:'auto' }">
      <!--       <div style="float: left"><el-form :inline="true">-->
      <!--        <el-form-item>-->
      <el-button size="mini" type="primary" @click="queryDataSource()">查询</el-button>
      <el-button size="mini" type="primary" @click="addDataSourcedialog()">新增</el-button>
      <!--        </el-form-item>-->
      <!--      </el-form> </div>-->
      <table-change @change="tableSize = $event" style="float: right;" />
      <el-table
        :height="documentHeight-181"
        :size="tableSize"
        :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
        :data="tableData"
        row-key="id"
        style="width: 100%;margin-top: 10px">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="datasource"
          align="center"
          label="数据源"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="datasourceName"
          label="数据源名称"
          align="left"
          show-overflow-tooltip
          min-width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="datasourceGroup"
          label="数据源分组"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="jdbcUrl"
          label="jdbc连接串"
          align="left"
          show-overflow-tooltip
          min-width="200">
        </el-table-column>
        <el-table-column
          prop="createUser"
          label="创建人"
          header-align="center"
          :show-overflow-tooltip="true"
          align="left"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          header-align="center"
          label="操作"
          align="center"
          fixed="right"
          min-width="180">
          <template slot-scope="scope">
            <el-link :click-change-color="true" :underline="false" style="margin-left: 5px"
                     @click="editDataSource(scope.row)" type="primary">编辑
            </el-link>
            <span style="margin-left: 5px;color:#CCCCCC">|</span>
            <el-link :underline="false" style="margin-left: 5px" @click="deleteDataSource(scope.row)" type="primary">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 5px;float: right"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size=pagesize
        :page-sizes="[10, 20, 30, 50]"
        layout="total,prev, sizes,pager, next,jumper"
        :total=total>
      </el-pagination>
    </el-card>
    <el-dialog @close="addDataSource(false)" width="40%" :title="dialogtitle" style="z-index:1000000"
               :close-on-click-modal=false :visible.sync="dialogFormVisible">
      <el-form ref="addsourceform" :model="addsourceform" :rules="fromrules">
        <el-form-item label="数据源" label-width="120px" prop="datasource">
          <el-select filterable style="width: 90%" @change="changeDialogitem()" size="mini"
                     v-model="addsourceform.datasource"
                     placeholder="请选择数据源">
            <el-option
              v-for="item in addsourceoptions"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据源名称" label-width="120px" prop="datasourceName">
          <el-input style="width: 90%" placeholder="请输入名称" size="mini" v-model="addsourceform.datasourceName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据源分组" label-width="120px">
          <el-input style="width: 90%" placeholder="" size="mini" v-model="addsourceform.datasourceGroup"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" v-if="mysqlshow" label-width="120px">
          <el-input style="width: 90%" placeholder="" size="mini" v-model="addsourceform.jdbcUsername"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" v-if="mysqlshow" label-width="120px">
          <el-input style="width: 90%" placeholder="" show-password size="mini" v-model="addsourceform.jdbcPassword"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="jdbc url" v-if="urlshow" label-width="120px" prop="jdbcUrl">
          <el-input type="textarea" style="width: 90%" placeholder="" size="mini" v-model="addsourceform.jdbcUrl"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="jdbc驱动类" v-if="driveshow" label-width="120px" prop="jdbcDriverClass">
          <el-input style="width: 90%" placeholder="" size="mini" v-model="addsourceform.jdbcDriverClass"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="ZK地址" v-if="hbaseinputshow" label-width="120px" prop="zkAdress">
          <el-input style="width: 90%" placeholder="127.0.0.1:2181" size="mini" v-model="addsourceform.zkAdress"
                    autocomplete="off"></el-input>
        </el-form-item>
        <!--        <el-form-item label="地址" v-if="mongodbinputshow" label-width="120px" prop="zkAdress">-->
        <!--          <el-input type="textarea" style="width: 90%" placeholder="" size="mini" v-model="addsourceform.zkAdress"-->
        <!--                    autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="数据库名称" v-if="mongodbinputshow" label-width="120px" prop="databaseName">-->
        <!--          <el-input style="width: 90%" placeholder="" size="mini" v-model="addsourceform.databaseName"-->
        <!--                    autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="注释" label-width="120px">
          <el-input type="textarea" style="width: 90%" placeholder="" size="mini" v-model="addsourceform.comments"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addDataSource(false)">取 消</el-button>
        <el-button size="mini" type="primary" @click="addDataSource(true)">确 定</el-button>
        <el-button size="mini" type="primary" @click="testDataSource()">测试连接</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import defaultValue from "./components/dialogdata";
import Print from "@/util/print";
import axios from "axios";
// import datatree from './components/dataDevelopTree.vue'
// import treehead from './components/treehead.vue'
// import containers from './components/graphContainers.vue'
// import nodeContainers from './components/nodeContainers.vue'
export default {
  name: "demo1",
  // components: { datatree,treehead,containers,nodeContainers },
  data() {
    return {
      tableSize: "",
      tableData: [],
      dataSource: "",
      dialogtitle: "新增数据源",
      dialogFormVisible: false,
      addsourceoptions: [],
      addsourceform: {
        datasourceName: "",
        datasourceGroup: "Default",
        datasource: "",
        databaseName: "",
        jdbcUsername: "",
        jdbcPassword: "",
        jdbcUrl: "",
        zkAdress: "",
        comments: "",
        jdbcDriverClass: ""
        // "datasourceName":"test2",
        // "datasource":"test1",
        // "datasourceGroup":"test1",
        // "databaseName":"test1",
        // "jdbcUsername":"test1",
        // "jdbcPassword":"test1",
        // "jdbcUrl":"test1",
        // "jdbcDriverClass":"test1",
        // "zkAdress":"test1",
        // "comments":"test1"
      },
      fromrules: {
        datasourceName: { required: true, message: "请输入", trigger: "blur" },
        datasource: { required: true, message: "请选择", trigger: "change" },
        jdbcUrl: { required: true, message: "请输入", trigger: "blur" },
        jdbcDriverClass: { required: true, message: "请输入", trigger: "blur" },
        zkAdress: { required: true, message: "请输入", trigger: "blur" },
        name9: { required: true, message: "请输入", trigger: "blur" },
        name10: { required: true, message: "请输入", trigger: "blur" }
      },
      mysqlshow: false,
      urlshow: false,
      driveshow: false,
      hbaseinputshow: false,
      mongodbinputshow: true,
      currentPage: 1,
      pagesize: 30,
      initialaddsourceform: {},
      total: 0,
      dataDic: {},
      runTest: false
    };
  },
  methods: {
    addDataSourcedialog() {
      this.dialogtitle = "新增数据源";
      this.dialogFormVisible = true;
      Object.assign(this.addsourceform, this.initialaddsourceform);
    },
    async addDataSource(data) {
      if (!data) {
        this.dialogFormVisible = false;
        this.hbaseinputshow = false;
        this.mysqlshow = false;
        this.mongodbinputshow = true;
        this.$refs.addsourceform.resetFields();
        return;
      }
      await this.testDataSource("noMsg");
      if (!this.runTest) {
        return this.$message({
          showClose: true,
          type: "error",
          message: "连接失败"
        });
        // return this.$message({  duration:100000, type: "error", message: `连接失败` });
      }
      this.$refs.addsourceform.validate((valid) => {
        if (valid) {
          if (this.dialogtitle === "新增数据源") {
            this.$http.post("/datasourceJdbc/add", this.addsourceform).then((res) => {
              // console.log(res,1111)
              if (res.code === "200") {
                this.$message({
                  // showClose:true,
                  type: "success",
                  message: "添加成功!"
                });
                this.$refs.addsourceform.resetFields();
                this.dialogFormVisible = false;

              }
            }).finally(() => {
              this.queryDataSource();
            });
          } else {
            this.$http.post("/datasourceJdbc/modify", this.addsourceform).then((res) => {
              // console.log(res)
              if (res.code === "200") {
                this.$message({
                  // showClose:true,
                  type: "success",
                  message: "修改成功!"
                });
                this.$refs.addsourceform.resetFields();
                this.dialogFormVisible = false;
              }
            }).finally(() => {
              this.queryDataSource();
            }).finally(() => {
              this.hbaseinputshow = false;
              this.mysqlshow = false;
              this.mongodbinputshow = true;

            });
          }
        }

      });
    },
    //data用于判断是否展示信息
    testDataSource(data) {
      return new Promise((resolve, reject) => {
        this.$refs.addsourceform.validate((valid) => {
          if (valid) {
            this.$http.post("/datasourceJdbc/runTest", this.addsourceform).then((res) => {
              if (res.code === "200") {
                if (!data) {
                  this.$message({
                    duration: 10000,
                    type: "success",
                    message: "连接成功!"
                  });
                }
                this.runTest = true;
              } else {
                if (!data) {
                  this.$message({
                    duration: 10000,
                    type: "error",
                    message: `${res.msg}`
                  });
                }
                this.runTest = false;
              }
              resolve();
            });
          }
        });
      });
    },
    changeDialogitem(data) {
      let selectData = this.addsourceform.datasource;
      if (this.addsourceform.datasource === "hbase") {
        this.hbaseinputshow = true;
        this.mysqlshow = false;
        this.mongodbinputshow = false;
      } else if (this.addsourceform.datasource === "mongodb") {
        this.hbaseinputshow = false;
        this.mysqlshow = false;
        this.mongodbinputshow = true;
        this.dataDic[selectData].driver ? this.driveshow = true : this.driveshow = false;
        this.dataDic[selectData].url ? this.urlshow = true : this.urlshow = false;
        data !== "edit" && (this.addsourceform.jdbcUrl = this.dataDic[selectData].url);
        data !== "edit" && (this.addsourceform.jdbcDriverClass = this.dataDic[selectData].driver);
      } else {
        this.dataDic[selectData].driver ? this.driveshow = true : this.driveshow = false;
        this.dataDic[selectData].url ? this.urlshow = true : this.urlshow = false;
        data !== "edit" && (this.addsourceform.jdbcUrl = this.dataDic[selectData].url);
        data !== "edit" && (this.addsourceform.jdbcDriverClass = this.dataDic[selectData].driver);
        this.hbaseinputshow = false;
        this.mysqlshow = true;
        this.mongodbinputshow = false;
      }
    },
    queryDataSource() {
      this.$http.post("/datasourceJdbc/findPage", {
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }
      ).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });

    },
    deleteDataSource(row) {
      this.$confirm("是否删除此条数据源", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.post("/datasourceJdbc/delete", { id: row.id }).then((res) => {
          if (res.code === "200") {
            this.$message({
              duration: 10000,
              type: "success",
              message: "删除成功!"
            });
          }
        }).finally(() => {
          this.queryDataSource();
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    editDataSource(row) {
      this.dialogtitle = "编辑数据源";
      this.$http.post("/datasourceJdbc/getById", { id: row.id }).then((res) => {
        Object.assign(this.addsourceform, res.data);
      }).finally(()=>{
        this.dialogFormVisible = true;
        this.changeDialogitem("edit");
      });
    },
    getDic() {
      this.$http.post("datasourceJdbc/getJdbcDriver").then((res) => {
        // console.log(res);
        this.dataDic = res.data;
        for (let key of Object.keys(res.data)) {
          let option = { label: "" };
          console.log(key, 111);
          option.label = key;
          this.addsourceoptions.push(option);
        }
        console.log(this.addsourceoptions, 11111);
      });
    },

    handleSizeChange(val) {
      this.pagesize = val;
      this.queryDataSource();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryDataSource();
    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 220;
    }
  },
  created() {
    this.queryDataSource();
    this.getDic();
    this.initialaddsourceform = Object.assign({}, this.addsourceform);
    this.$bus.$on("removeTabs", (data) => {
      this.removeTab(data);
    });
  }

};
</script>

<style scoped>
::v-deep .el-card__body {
    padding-top: 5px;
}
</style>
